<template>
	<div>
		<p class="node-label mt10">请选择要统计的字段</p>
		<el-tabs v-model="activeName" class="demo-tabs">
			<el-tab-pane v-for="(item, index) in dragData.infoContent" :key="index" :label="item.label" :name="item.value">
				<el-checkbox-group v-model="item.checked" @change="handlePreview(item)">
					<el-checkbox v-for="(chi, k) in item.model" :key="k" :label="chi.name" :value="chi"> </el-checkbox>
				</el-checkbox-group>
				<FieldList class="mt10" :item="item" @update:change="handlePreview"></FieldList>
			</el-tab-pane>
		</el-tabs>

		<!-- <el-descriptions class="mt10" :title="`已选择统计条件:${conditionLen}`" size="small" border>
			<el-descriptions-item v-for="(item, i) in conditionList" :key="i" :label="item.name" :width="item.name ? '100px' : ''">
				<p>
					<span v-if="item.fieldValue == 'null'"> 否 </span>
					<span v-else-if="item.fieldValue == 'not null'"> 是 </span>
					<span v-else>
						{{ item.fieldValue }}
					</span>
				</p>
			</el-descriptions-item>
		</el-descriptions> -->
	</div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import FieldList from '../FieldList/index.vue'

type Props = {
	dragData: any
}
const props = withDefaults(defineProps<Props>(), {})

const emit = defineEmits(['cell-change'])
const activeName = ref(1)

const formateData = (checked, item) => {
	const data = checked
		.map((chi) => {
			const getValueObj = (val) => {
				if (item.value == 1) {
					return {
						fieldValue: Array.isArray(val) ? val.join(',') : val,
						condition: 'between',
					}
				} else if (item.value == 4) {
					if (val.split(',').length == 2) {
						let tempObj: any = {
							fieldValue: val,
							condition: 'between',
							splicing: chi.splicing ? chi.splicing : undefined,
						}
						if (chi.splicing) {
							tempObj.fieldName = ''
						}
						return tempObj
					}
				} else if (item.value == 5) {
					return {
						fieldValue: val,
						condition: 'is',
					}
				} else if (Array.isArray(val)) {
					return {
						fieldValue: val.join(','),
						condition: 'in',
					}
				} else {
					return {
						fieldValue: val,
						condition: chi.flag == 1 ? 'like' : '=',
					}
				}
			}
			if (chi.value) {
				let tempObj = {
					name: chi.name,
					fieldName: chi.field,
					...getValueObj(chi.value),
				}
				return tempObj
			}
		})
		.filter(Boolean)
	return data
}

let tempObj = {}
const conditionLen = ref(0)
const conditionList:any = ref([])
const handlePreview = (fileData) => {
	const data = formateData(fileData.checked, fileData)
	tempObj[activeName.value] = data
	let flattened: any = Object.values(tempObj).reduce((acc: any, cur) => acc.concat(cur), [])
	conditionList.value = flattened
	// const jsonData = window.luckysheet.getAllSheets()[0] || {}
	// const dimension = jsonData.celldata.filter((item) => item.v.dimension == 1)
	// const dimenseCondit = dimension[0]?.v?.condition || { publicLogicList: [] }
	const query = {
		tableName: props.dragData.reserve?.tableName,
		// dimensionFieldName: dimenseCondit.dimensionFieldName,
		// category: dimenseCondit.category,
		name: props.dragData.name,
		associatedFields: props.dragData.associatedFields,
		publicLogicList: flattened,
	}
	conditionLen.value = flattened.length
	emit('cell-change', query, props.dragData)
}
</script>

<style scoped></style>
